<template>
  <a-modal
    title="详情"
    width="80%"
    :visible="visible"
    :footer="null"
    @cancel="handleCancel"
    destroyOnClose
  >
    <a-row>
      <a-col
        :xs="16"
        :sm="16"
      >
        <detail-list
          title="基本信息"
          :col="2"
        >
          <detail-list-item
            v-for="item in basicInfo"
            :key="item.term"
            :term="item.term"
          >{{ item.customRender ? item.customRender(details[item.dataIndex]) : details[item.dataIndex] }}</detail-list-item>
        </detail-list>
        <detail-list
          title="验收信息"
          :col="1"
        >
          <detail-list-item term="交付说明">{{ details.deliveryComment }}</detail-list-item>
          <detail-list-item term="交付附件">
            <template v-if="details.deliveryAttachment">
              <a
                title="点击下载"
                @click="downloadAttachment(details.deliveryAttachment)"
              >
                <a-icon type="file" />
              </a>
            </template>
            <span v-else>无</span>
          </detail-list-item>
        </detail-list>
      </a-col>
      <a-col
        :xs="8"
        :sm="8"
      >
        <detail-list
          title="项目记录"
          :col="1"
        ></detail-list>
        <a-steps
          direction="vertical"
          size="small"
          :current="trace.length - 1"
        >
          <a-step
            v-for="step in trace"
            :key="step.id"
            :title="step.actionName"
            :description="transformTimeString(step.modifiedTime)"
          />
        </a-steps>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
import { getProjectMemberDetail, getProjectApplicantTrace } from '@/api/manage'
import { formatTimestamp } from '@/utils/format'
import { BASIC_INFO } from '../constants/orderDetail'
import { downloadAttachment } from '@/utils/util'

const DetailListItem = DetailList.Item

export default {
  name: 'OrderDetailModal',
  components: {
    DetailList,
    DetailListItem
  },
  data() {
    return {
      visible: false,
      details: {
        bankCardNum: '',
        deliveryAttachment: '',
        deliveryComment: '',
        idcardNum: '',
        individualUserId: 0,
        name: '',
        phone: '',
        remark: '',
        salaryFee: 0,
        status: 0
      },
      trace: [],
      basicInfo: BASIC_INFO
    }
  },
  methods: {
    downloadAttachment,
    show(projectId, individualUserId,projectMemberId) {
      this.visible = true
      getProjectMemberDetail(projectId, projectMemberId)
        .then(res => {
          if (res.resData) this.details = res.resData
        })
      getProjectApplicantTrace(projectId, individualUserId)
        .then(res => {
          this.trace = res.resData
        })
    },
    handleCancel() {
      this.visible = false
    },
    transformTimeString(date) {
      return formatTimestamp(date)
    }
  }
}
</script>
